/**
 * Created with hong.rong
 * Date:2020/07/06
 */

import React, { useState } from 'react'
import { Table } from 'antd'
import moment from 'moment'
import Carousel, { Modal, ModalGateway } from 'react-images'
import Search from './components/Search'
import useGroupBuy from './useGroupBuy'

export default function Index() {
  const [visible, setVisible] = useState(false)
  const [imgUrl, setImgUrl] = useState([])

  const {
    loading,
    searchValue,
    total,
    dataSource,
    handleFetchList,
  } = useGroupBuy()

  const renderColumn = () => {
    return [
      {
        title: '序列',
        dataIndex: 'sortNum',
        ellipsis: true,
        render: (_, _2, i) => i + 1,
      },
      {
        title: '团购ID',
        dataIndex: 'groupId',
        ellipsis: true,
      },
      {
        title: '名称',
        dataIndex: 'title',
        ellipsis: true,
      },
      {
        title: '图片',
        dataIndex: 'img',
        width: 100,
        render: v => {
          if (v) {
            return (
              <img
                style={{
                  display: 'block',
                  width: 80,
                  height: 'auto',
                  cursor: 'pointer',
                }}
                src={v}
                alt=""
                onClick={() => {
                  setImgUrl([v])
                  setVisible(true)
                }}
              />
            )
          }
        },
      },
      {
        title: '当前人数',
        dataIndex: 'groupUserNum',
        ellipsis: true,
      },
      {
        title: '团购开始时间',
        dataIndex: 'startTime',
        ellipsis: true,
      },
      {
        title: '团购结束时间',
        dataIndex: 'endTime',
        ellipsis: true,
      },
      {
        title: '状态',
        dataIndex: 'groupStatus',
        ellipsis: true,
      },
      {
        title: '备注',
        dataIndex: 'specs',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'action',
        width: 100,
        render: (_, r) => (
          <div className="ub ub-row ub-ac">
            <div className="link-button" onClick={() => {}}>
              详情
            </div>
            <div className="link-button ml-10" onClick={() => {}}>
              修改
            </div>
          </div>
        ),
      },
    ]
  }

  /**
   * 搜索
   * @param search
   * @returns {Promise<void>}
   */
  const handleSearch = async (search = {}) => {
    await handleFetchList({ ...searchValue, ...search })
  }
  /**
   * 翻页
   * @param pagination
   * @returns {Promise<void>}
   */
  const handlePageChange = async pagination => {
    await handleFetchList({
      ...searchValue,
      page: pagination.current,
      pageSize: pagination.pageSize,
    })
  }
  return (
    <div>
      <Search
        onSearch={handleSearch}
        refreshList={() => handleFetchList(searchValue)}
      />
      <Table
        loading={loading}
        pagination={{
          current: searchValue.page,
          pageSize: searchValue.pageSize,
          total: total,
        }}
        dataSource={dataSource}
        columns={renderColumn(searchValue)}
        rowKey={(v, i) => i}
        onChange={handlePageChange}
      />
      <ModalGateway>
        {visible ? (
          <Modal onClose={() => setVisible(false)}>
            <Carousel
              views={imgUrl.map(v => ({
                src: v,
              }))}
            />
          </Modal>
        ) : null}
      </ModalGateway>
    </div>
  )
}
